import { ProFormCheckbox } from "@ant-design/pro-components";
import { useState } from "react";
import "./index.less";
import { text } from "./utils";
import TermsConditionsModal from "@/components/terms-and-conditions";

interface SubmissionCheckboxProps {
  checkGroupName?: string;
  form?: any;
}

const TermsCheck: React.FC<SubmissionCheckboxProps> = ({ checkGroupName }) => {
  const htmlContent = { __html: text };

  const [modal2Open, setModal2Open] = useState(false);
  const [checkboxChecked, setCheckboxChecked] = useState(false);

  const handleCheckboxChange = (e: any) => {
    if (e.target.checked) {
      console.log(checkboxChecked, "checkboxChecked");
      setModal2Open(true);
    } else {
      setCheckboxChecked(false);
    }
  };

  const handleCancelInModal = () => {
    setCheckboxChecked(false);
    setModal2Open(false);
  };

  const handleAgreeInModal = () => {
    setCheckboxChecked(true);
    setModal2Open(false);
  };

  return (
    <>
      <ProFormCheckbox
        rules={[
          {
            required: true,
            message: "This field is required",
          },
        ]}
        name={[`${checkGroupName}`, "tAndC"]}
        fieldProps={{
          onChange: handleCheckboxChange,
        }}
      >
        Please read and agree to our{" "}
        <span className="highlight-text">Terms and Conditions</span> before
        submission.
      </ProFormCheckbox>
      <TermsConditionsModal
        title="Terms and Conditions"
        text={htmlContent}
        onOk={handleAgreeInModal}
        onCancel={handleCancelInModal}
        isModalOpen={modal2Open}
        btnLeftText="Cancel"
        btnRightText="Agree"
      />
    </>
  );
};

export default TermsCheck;
